<template>
    <el-form ref="userFormRef" :model="user" label-width="5.2%" style="margin: auto;" :rules="userRules">
        <el-form-item label="账号" prop="loginAct">
            <el-input type="text" v-model="user.loginAct" placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd2" v-if="user.id > 0">
            <el-input type="password" v-model="user.loginPwd2" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd" v-else="">
            <el-input type="password" v-model="user.loginPwd" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input type="text" v-model="user.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="user.phone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input type="email" v-model="user.email" placeholder="请输入邮箱"/>
        </el-form-item>

        <el-form-item label="账号是否未过期" prop="accountNoExpired">
            <el-select v-model="user.accountNoExpired" placehoder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="密码是否未过期" prop="credentialsNoExpired">
            <el-select v-model="user.credentialsNoExpired" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="账号是否未锁定" prop="accountNoLocked">
            <el-select v-model="user.accountNoLocked" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="账号是否已启用" prop="accountEnabled">
            <el-select v-model="user.accountEnabled" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="userSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {showMessage} from "../util/message.js";

// 用户表单数据对象，存储表单输入值（响应式）
let user = ref({})
// 获取路由实例，用于页面跳转
const router = useRouter();

// 通用是/否选择项（用于下拉框）
let options = [
    {
        value: 1,
        label: '是'
    },
    {
        value: 0,
        label: '否'
    }
]


// 用户表单验证规则（响应式）
let userRules = ref({
    // 账号验证规则
    loginAct: [
        {required: true, message: '请输入账号', trigger: 'blur'},
        {min: 3, max: 30, message: '账号必须是3-30个字符', trigger: 'blur'},
    ],
    // 密码验证规则
    loginPwd: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 16, message: '密码必须是6-16个字符', trigger: 'blur'},
    ],
    loginPwd2: [ //编辑的时候，可以不输入密码
        {min: 6, max: 16, message: '密码必须是6-16个字符', trigger: 'blur'},
    ],
    // 姓名验证规则（仅允许中文）
    name: [
        {required: true, message: '请输入姓名', trigger: 'blur'},
        {min: 2, message: '姓名至少是两个字符', trigger: 'blur'},
        {pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名必须是中文汉字', trigger: 'blur'}
    ],
    // 手机号验证规则
    phone: [
        {required: true, message: '请输入手机号', trigger: 'blur'},
        {min: 11, max: 11, message: '手机号码必须是11位', trigger: 'blur'},
        {pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}
    ],
    // 邮箱验证规则
    email: [
        {required: true, message: '请输入邮箱', trigger: 'blur'},
        {type: 'email', message: '邮箱格式有误', trigger: 'blur'}
    ],
    // 账号是否未过期（必选）
    accountNoExpired: [
        {required: true, message: '请选择', trigger: 'change'}
    ],
    // 凭证是否未过期（必选）
    credentialsNoExpired: [
        {required: true, message: '请选择', trigger: 'change'}
    ],
    // 账号是否未锁定（必选）
    accountNoLocked: [
        {required: true, message: '请选择', trigger: 'change'}
    ],
    // 账号是否启用（必选）
    accountEnabled: [
        {required: true, message: '请选择', trigger: ['blur', 'change']}
    ]
})


/**
 * 组件挂载时执行的生命周期钩子
 * 1. 从路由参数中获取userId
 * 2. 如果userId存在，调用loadUser函数加载用户详情
 */
onMounted(() => {
    let userId = useRoute().params.userId;  // 获取路由参数中的用户ID

    if (userId) {
        loadUser(userId);  // 加载用户详情数据
    }
})

/**
 * 用户表单提交处理函数
 * 功能：根据用户ID是否存在，区分新增/编辑操作并提交表单数据
 * 1. 创建FormData对象收集表单数据
 * 2. 遍历user对象属性，将数据添加到FormData
 * 3. 判断user.id是否存在：
 *    - 存在：调用doPut执行更新操作
 *    - 不存在：调用doPost执行新增操作
 * 4. 根据API响应结果显示提示信息并跳转页面
 */
const userSubmit = () => {
    // 创建FormData对象用于表单提交（支持文件上传等复杂数据）
    let formData = new FormData();

    // 将用户对象的所有属性添加到FormData
    for (let prop in user.value) { //RefImpl
        formData.append(prop, user.value[prop]);
    }

    if (user.value.id > 0) {
        // 调用PUT API提交更新数据
        doPut('/api/user', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 提交成功提示
                router.push('/dashboard/user'); // 跳转到用户列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 提交失败提示
            }
        })
    } else {
        // 调用POST API提交新增数据
        doPost('/api/user', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 提交成功提示
                router.push('/dashboard/user'); // 跳转到用户列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 提交失败提示
            }
        })
    }
}

/**
 * 返回上一页功能
 * 使用路由的back方法实现页面回退
 */
const goBack = () => {
    router.back()
}

/**
 * 加载用户详情数据
 * @param {any} id - 用户ID
 * 1. 调用GET API获取用户详情
 * 2. 成功获取后将数据赋值给user响应式对象
 * 3. 在控制台打印用户数据（用于调试）
 */
const loadUser = id => {
    doGet('/api/user/' + id, {}).then(resp => {
        if (resp) {
            if (resp.data.code == 200) {
                user.value = resp.data.info  // 将获取的用户数据赋值给响应式对象
            } else {
                showMessage(resp.data.msg, 'error');
            }
        }
    })
}
</script>

<style scoped>
.el-input {
    width: 10% !important;
}

.el-select {
    width: 10% !important;
}
</style>